<template>
	<div class="header-useCheckbox">
		<div class="name">{{ username }}</div>
		<el-button type="warning" @click="logout">退出登录</el-button>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import { Logout } from '@/api/userApi.ts'
	import { useRouter } from 'vue-router'

	const username = computed(() => localStorage.getItem('username'))
	const router = useRouter()
	const logout = () => {
		Logout()
		router.push('login')
		localStorage.removeItem('token')
		localStorage.removeItem('username')
	}
</script>

<style scoped lang="scss">
	.header-useCheckbox {
		width: calc(100% - 40px);
		height: 50px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		.name {
			flex: 1;
		}
	}
</style>
